<template>
    <div class="content">
        <div class="title">
            <van-icon @click="router.back()" class="icon" size="22px" color="#fff" name="arrow-left" />
            <div class="text">{{ $t('轉移') }}</div>
            <van-icon @click="router.push('/transfer/logs')" size="22px" color="#fff" class="iconR" name="todo-list-o" />
        </div>
        <div class="conversion">
            <div class="left">
                <div class="top">
                    <van-icon size="24px" color="#556566" name="cash-back-record" />
                    <span>{{ $t('从') }}Tokens</span>
                </div>
                <div class="centre">
                    <van-icon size="16px" color="#556566" name="down" />
                </div>
                <div class="btm">
                    <van-icon size="24px" color="#556566" name="paid" />
                    <span>{{ $t('到') }}Wallet</span>
                </div>
            </div>
            <div class="right">
                <van-icon size="24px" color="#f2ce3d" name="sort" />
            </div>
        </div>
        <div @click="popshow" class="pop">
            <div class="left">
                <img class="img" src="@/assets/home/bnb.png" alt="">
                <span class="name">BTB</span>
            </div>
            <van-icon size="22px" color="#fff" name="arrow-down" />
        </div>
        <div class="shuliang">{{ $t('數量') }}</div>
        <van-search class="search" left-icon="" background="#2e323b" v-model="text" show-action :placeholder="$t('請輸入數量')"
            @search="onSearch" @cancel="all">
            <template #action>
                <div style="color: #f2ce3d;background-color: #2e323b;">All</div>
            </template>
        </van-search>
        <div class="yue">
            <span>{{ $t('錢包餘額') }}</span>
            <span>0BTB</span>
        </div>
        <div class="btn">
            {{ $t('确定') }}
        </div>
        <van-popup class="popup" v-model:show="showBottom" position="bottom" :style="{ height: '70%' }">
            <van-search v-model="biValue" shape="round" background="#2e323b" :placeholder="$t('搜索币种')" />
            <div style="font-size: 15px;color: #fff;margin-left: 15px;">{{ $t('热门') }}</div>
            <div style="height: 40px;"></div>
            <div style="font-size: 15px;color: #fff;margin-left: 15px;">{{ $t('币种列表') }}</div>
            <ul class="ul">
                <li v-for="item in 10" class="li">
                    <div class="left">
                        <img src="@/assets/home/bnb.png" alt="">
                        <div style="margin-left: 5px;">
                            <div style="font-size: 15px;">BTB</div>
                            <div style="font-size: 13px;color: d5d5d5;">BTB COIN</div>
                        </div>
                    </div>
                    <div class="right">
                        <van-icon color="#fff" size="20px" name="success" />
                    </div>
                </li>
            </ul>
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const text = ref('')
const showBottom = ref(false)
const biValue = ref('')

function all() {
    console.log(11111111);
}
function popshow() {
    showBottom.value = true
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
    background-color: #2e323b;
}

::v-deep .van-search {
    border-radius: 10px;
    padding-right: 20px;

}

::v-deep .van-search__action {
    padding: 0;
}

::v-deep .van-search__content {
    background-color: #232830;
}

.content {
    width: 100vw;
    height: 100vh;
    background-color: #17171a;
    padding: 0 15px;
    box-sizing: border-box;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 54px;
        padding: 15px 0;
        box-sizing: border-box;

        .text {
            font-size: 15px;
            color: #fff;
        }
    }

    .conversion {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 106px;
        background-color: #2e323b;
        border-radius: 10px;
        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 14px;

        .left {
            color: #d5d5d5;
            font-size: 17px;

            span {
                padding: 0 15px;
            }

            .top {
                display: flex;
                align-items: center;
                height: 33px;
            }

            .btm {
                display: flex;
                align-items: center;
                height: 33px;
            }
        }
    }

    .pop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 56px;
        background-color: #2e323b;
        border-radius: 10px;
        padding: 15px;
        box-sizing: border-box;
        margin-bottom: 20px;

        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .img {
                width: 24px;
                height: 24px;
            }

            .name {
                font-size: 15px;
                color: #fff;
                margin-left: 3px;
            }
        }
    }

    .shuliang {
        font-size: 13px;
        color: #d5d5d5;
        margin-bottom: 14px;
    }

    .search {
        ::v-deep .van-search__content {
            background-color: #2e323b;
        }

        ::v-deep .van-field__control {
            color: #fff;
        }
    }

    .yue {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #fff;
        margin-top: 10px;
        margin-bottom: 40px;
    }

    .btn {
        width: 100%;
        height: 43px;
        background-color: #f2ce3d;
        font-size: 16px;
        text-align: center;
        line-height: 43px;
        border-radius: 4px;
    }

    .popup {
        padding: 15px;

        ::v-deep .van-field__control {
            color: #fff;
        }

        .ul {
            .li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 15px;

                .left {
                    display: flex;
                    align-items: center;
                    color: #fff;

                    img {
                        width: 32px;
                        height: 32px;
                    }
                }
            }
        }

    }


}
</style>